<script lang="ts" setup>
// 系统状态
import { useSystemStore } from '@/stores/system'
import { RouteNameEnum, RouterEnum } from '@/enum'
import { useUserStore } from '@/stores/user'
import { useGlobalDialog } from '@/hooks'

const { globalDialog } = useGlobalDialog()

const userStore = useUserStore()
const systemStore = useSystemStore()

const route = useRoute()
const router = useRouter()

const handleClose = (p: [string, string]) => {
  systemStore.system.routeMap.delete(p[0])
  if (p[1] === route.fullPath) {
    router.push(RouterEnum.ADMIN)
  }
}

const logout = async () => {
  await globalDialog('确定退出登录?').then((res: boolean) => {
    if (res) {
      userStore.logout()
      router.push({ name: RouteNameEnum.LOGIN })
    }
  })
}
</script>

<template>
  <el-container class="size-full flex justify-between items-center">
    <el-scrollbar class="items-center pt-3 w-auto">
      <div class="flex gap-2">
        <el-tag
          v-for="p in systemStore.system.routeMap"
          :key="p[1]"
          class="!h-8"
          closable
          @close="handleClose(p)"
        >
          <router-link
            :class="
              'flex text-sm items-center h-8 ' + (route.fullPath === p[1] ? 'text-amber-500' : '')
            "
            :to="p[1]"
          >
            {{ p[0] }}
          </router-link>
        </el-tag>
      </div>
    </el-scrollbar>
    <el-container class="z-50 !min-w-28 flex items-center justify-end">
      <el-link
        :underline="false"
        class="min-w-10 h-10 mx-4 max-sm:mx-2 border-2 use-radius-xs use-transitions-shadow-short use-hover-bg border-amber-500"
        @click="
          () => {
            systemStore.dialog.setting = true
            systemStore.system.isShowMobile = false
          }
        "
      >
        <SvgIcon name="setting" svg-class="!size-6" />
      </el-link>
      <el-popover>
        <template #reference>
          <el-link
            :underline="false"
            class="min-w-10 h-10 use-radius-xs use-transitions-shadow-short use-hover-bg border-amber-500"
          >
            <el-avatar :size="40" :src="userStore.user.avatar" shape="square" />
          </el-link>
        </template>
        <el-container direction="vertical">
          <a
            v-if="!userStore.user.id"
            class="p-1.5 text-center w-full use-hover-color use-transitions-colors-short"
            @click="router.push({ name: RouteNameEnum.LOGIN })"
          >
            登 录
          </a>
          <a
            v-else
            class="p-1.5 text-center w-full use-hover-color use-transitions-colors-short"
            @click="logout"
          >
            退 出
          </a>
        </el-container>
      </el-popover>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped></style>
